<template>
  <div class="app-container customer-container">
    <!-- <eHeader :query="query" /> -->
    <el-row :gutter="20">
      <el-col :xs="7" :sm="6" :md="4" :lg="4" :xl="4">
        <div class="head-container">
          <el-input v-model="deptName" clearable placeholder="输入公司名称搜索" prefix-icon="el-icon-search" style="width: 100%;" class="filter-item" @input="handleFilterCustomer" />
        </div>
        <ul class="lists">
          <li v-for="list in depts" :key="list.customerName" class="list" @click="handleNodeClick(list)">{{ list.customerName }}</li>
        </ul>
        <!-- <el-tree :data="depts" :expand-on-click-node="false" default-expand-all @node-click="handleNodeClick" /> -->
      </el-col>
      <el-col :xs="17" :sm="18" :md="20" :lg="20" :xl="20">
        <!--表格渲染-->
        <el-tabs v-model="activeTabName" type="card" @tab-click="getCurrentTabData">
          <el-tab-pane label="客户合同" name="contract">
            <TableContract ref="tableContractRef" />
          </el-tab-pane>
          <el-tab-pane label="客户设备" name="equipment">
            <TableEquipment ref="tableEquipmentRef" />
          </el-tab-pane>
          <el-tab-pane label="服务记录" name="order">
            <TableOrder ref="tableOrderRef" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import TableContract from './module/tableContract'
import TableEquipment from './module/tableEquipment'
import TableOrder from './module/tableOrder'
import request from '@/utils/request'

export default {
  components: { TableContract, TableEquipment, TableOrder },
  mixins: [initData],
  data() {
    return {
      depts: [],
      deptName: '',
      activeTabName: 'contract'
    }
  },
  watch: {
    deptName(newVal) {
      if (!newVal) {
        // 清空输入框，重新查询
        this.getDeptDatas()
        this.getCurrentTabData()
      }
    }
  },
  mounted() {
    // 获取公司树形结构数据
    this.getDeptDatas()
    this.getCurrentTabData()
  },
  methods: {
    // 切换tab
    getCurrentTabData() {
      switch (this.activeTabName) {
        case 'contract':
          this.$refs.tableContractRef.search({ customerName: this.deptName })
          break
        case 'equipment':
          this.$refs.tableEquipmentRef.search({ customerName: this.deptName })
          break
        case 'order':
          this.$refs.tableOrderRef.search({ customerName: this.deptName })
          break
      }
    },
    // 切换树形菜单
    handleNodeClick(data) {
      this.deptName = data.customerName
      this.getCurrentTabData()
    },
    handleFilterCustomer() {
      this.depts = this.depts.filter(item => {
        if (item.customerName.indexOf(this.deptName) > -1) {
          return item
        }
      })
    },
    // 获取客户信息
    getDeptDatas() {
      request({
        url: 'api/tCustomerInfoAll',
        method: 'get'
      }).then(res => {
        this.depts = res || []
      })
    }
  }
}
</script>

<style lang="scss">
  .customer-container {
    .lists {
      margin: 0;
      padding: 0;
    }
    .list {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      font-size: 14px;
      height: 26px;
      line-height: 26px;
      color: #606266;
      &:hover {
        background-color: #f5f5f5;
      }
    }
  }
</style>
